<template>
  <div class="main-body">
    <div class="top"><myhead></myhead></div>
    <div class="main">
      <div class="main-left">
        <div class="mian-menu">
          <el-scrollbar>
            <mymenu></mymenu>
          </el-scrollbar>
        </div>
      </div>
      <div class="main-right">
        <div class="navBar">
          <navbar></navbar>
        </div>
        <div class="main-content">
          <el-scrollbar>
            <router-view></router-view>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import myhead from "@/components/layout/head.vue";
import mymenu from '@/components/layout/mymenu.vue';
import navbar from "@/components/layout/navigation.vue";
import { ElNotification } from 'element-plus';
import { onMounted, reactive, watchEffect, ref } from 'vue';
import type { Customer_Index_Data } from "@/utils/type";
import { Get_Customers } from "@/api/customer";

const data = reactive<Customer_Index_Data>({
  isFirst: true,
  isRecord: false,
  isOpen: false,
  isDetailDrawerOpen: false,
  updateid: "",
  data: [],
  key: "",
  pages: {
    page: 1,
    limit: 12,
    total: 0,
  },
});

const showReminderNotification = (customer) => {
  ElNotification({
    title: '联系提醒',
    message: `客户 ${customer.name}的联系时间快到啦，联系时间为 ${customer.next_time}`,
    type: 'warning',
    duration: 5000
  });
};

const checkContactTime = () => {
  const now = new Date();
  const tomorrow = new Date(now);
  tomorrow.setDate(tomorrow.getDate() + 1);

  const remindCustomers = data.data.filter((customer) => {
    const contactTime = new Date(customer.next_time);
    return (
      contactTime.toDateString() === now.toDateString() ||
      contactTime.toDateString() === tomorrow.toDateString()
    );
  });

  console.log('需要提醒的客户:', remindCustomers); // 打印需要提醒的客户

  remindCustomers.forEach((customer) => {
    showReminderNotification(customer);
  });
};

const methods = {
  async bind() {
    data.loading = true;
    try {
      const res = await Get_Customers({
        page: data.pages?.page || 1,
        limit: data.pages?.limit || 16,
        key: data.key || "",
      });
      console.log('API 返回的数据:', res);
      if (res.code === 0) {
        data.data = res.data.data;
        data.pages!.total = res.data.total;
        data.isFirst = false;
        data.loading = false;
        // 检查提醒
        checkContactTime();
      } else {
        console.error('API 调用失败:', res);
      }
    } catch (error) {
      console.error('API 调用出错:', error);
    }
  },
};
watchEffect(() => {
  methods.bind();
});
</script>

<style scoped>
.main-body {
  width: 100vw;
  height: 100vh;
  /* background: #d49e9e; */
}

.top {
  height: 60px;
  border-bottom: 1px solid #e3e3e3;
}

.main {
  width: 100%;
  height: calc(100vh - 61px);
  display: flex;
}

.main-left {
  height: 100%;
  width: 190px;
  border-right: 1px solid #e3e3e3;
}

.main-right {
  flex: 1;
}

.mian-menu {
  height: 100%;
  /* border-right: 1px solid #eee; */
}

.navBar {
  border-bottom: 1px solid #e3e3e3;
}

.main-content {
  height: calc(100vh - 61px - 61px);
}
</style>
